"use client"
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {sexInfo, SexInfoKey, Users} from "@/lib/db/types";
import React, {useCallback} from "react";
import {SidebarMenu, SidebarMenuItem} from "@/components/ui/sidebar";
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import {LogOut, Mail, Settings, User, VenusAndMars} from "lucide-react";
import {useRouter} from "next/navigation";

const UserInfoHeader = ({user}: { user: Omit<Exclude<Users, null>, "password" | "createdAt" | "updatedAt">|null }) => {
    const router = useRouter();
    const logout = useCallback(() => {
        fetch("/logout").then(()=>{
            window.location.reload();
        })
    },[])

    return <>
        <SidebarMenu>
            <SidebarMenuItem>
                <DropdownMenu>
                    <DropdownMenuTrigger className={"cursor-pointer"} asChild>
                        <Avatar className={"-left-1"}>
                            <AvatarImage   src={user?.image} alt="@shadcn" />
                            <AvatarFallback className={"whitespace-nowrap"}>{user?.username.charAt(0)}</AvatarFallback>
                        </Avatar>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
                        <DropdownMenuItem>
                            <User/>
                            {user?.username}
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                            <Mail />
                            {user?.email}
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                            <VenusAndMars />
                            {sexInfo[user?.sex as SexInfoKey]}
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={()=>{
                            router.push(`/home/user/${user?.userId}`)
                        }}>
                            <Settings/>
                            修改用户
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={logout} className={"cursor-pointer"}>
                            <LogOut />
                            退出
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </SidebarMenuItem>
        </SidebarMenu>
    </>
}

export default UserInfoHeader;